<template>
  <el-dialog
      v-model="houseDetailWinDialogVisible"
      title="详情仓库设置"
      width="60%"
      @close="handleClose"
      draggable
      center
  ><!-- center可以让弹窗的‘header’和‘footer’部分居中-->
    <template #default>
      <el-descriptions>
        <el-descriptions-item label="仓库编码:">{{ house.houseEncode }}</el-descriptions-item>
        <el-descriptions-item label="仓库名称:">{{ house.houseName }}</el-descriptions-item>
        <el-descriptions-item label="仓库位置:">{{house.houseLocation}}</el-descriptions-item>
        <el-descriptions-item label="面积:">{{house.houseArea}}</el-descriptions-item>
        <el-descriptions-item label="负责人:">{{house.houseHead}}</el-descriptions-item>
        <el-descriptions-item label="备注:">
          <div v-html="house.houseRemark"></div>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue";
import houseRequest from "@/api/house.js";

// 申明组件的属性
const props = defineProps(['houseId']);
const emits = defineEmits(['cancelDetail'])
let houseDetailWinDialogVisible = ref(false);
// 详情对象
let house = ref({})

function handleClose(){
  emits("cancelDetail");
}
function loadHouseById() {
  houseRequest.selectById(props.houseId, res => {
    if (res.data) {
      house.value = res.data;
      houseDetailWinDialogVisible.value = true;
    }
  });
}

// 属性侦听
watch(() => props.houseId, () => {
  loadHouseById();
});
</script>

<style scoped>

</style>